<template>
  <view class="register-page">
    <view class="zzy-top-backgroup">
      <image src="https://healthdao-oss.oss-cn-hangzhou.aliyuncs.com/wap/app_style_background.png" mode="widthFix" class="backgroud-image"></image>
    </view>
    <u-navbar title="" :autoBack="true" bgColor="transparent"> </u-navbar>
    <!-- 标题内容 -->
    <view class="blue-title">
      <image src="/static/img/logo.png" style="width: 198rpx; height: 198rpx; border-radius: 30rpx"></image>
      <view class="font35 m-t-45">欢迎来到德宥堂</view>
    </view>
    <!-- 表单内容 -->
    <view style="padding: 0 75rpx">
      <view class="input-style">
        <u--input v-model="inputParams.mobile" placeholder="请输入账号" border="none" />
      </view>

      <view class="input-style">
        <u--input v-model="inputParams.password" placeholder="输入8-16位密码包含大小写字母及数字" type="password" border="none" />
      </view>

      <view class="flex-center" style="margin-bottom: 100rpx">
        <view>
          <u-checkbox-group v-model="checked" placement="column">
            <u-checkbox v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name"> </u-checkbox>
          </u-checkbox-group>
        </view>
        <view>
          <text class="text-blue" @tap="gotoXY('https://h5.dymall.pro/protocal/dyt_zcxy.html')">《用户协议》</text>
          <text class="text-blue" @tap="gotoXY('https://h5.dymall.pro/protocal/dyt_ysxy.html')">《隐私政策》</text>
        </view>
      </view>

      <u-button type="primary" text="登录" shape="circle" @click="formSubmit"></u-button>
      <view class="m-t-30 text-blue justify-b">
        <view @tap="$u.route('/pages/index/reg')">立即注册</view>
        <view @tap="forgetPassword">忘记密码？</view>
      </view>

      <view style="height: 100rpx"></view>
    </view>
  </view>
</template>

<script>
var app = getApp()
export default {
  data() {
    return {
      inputParams: {
        mobile: '',
        password: ''
      },
      checked: [],
      checkboxList1: [
        {
          name: '请阅读并同意'
        }
      ]
    }
  },
  methods: {
    formSubmit(e) {
      var that = this
      var { mobile, password } = this.inputParams
      if (mobile == '') {
        app.alert('请输入手机号')
        return
      }
      if (password == '') {
        app.alert('请输入密码')
        return
      }

      if (that.checked.length == 0) {
        app.alert('请先阅读同意协议并勾选')
        return
      }
      var postdata = {
        tel: mobile,
        pwd: password,
        pid: app.globalData.pid,
        logintype: 1
      }

      app.showLoading('提交中')
      app.post('ApiIndex/loginsub', postdata, function (data) {
        app.showLoading(false)
        if (data.status == 1) {
          // uni.setStorageSync('gtktoken', data.gtktoken)
          // uni.setStorageSync('login_token', data.gtktoken)
          // app.globalData.gtktoken = data.gtktoken
          uni.$u.route('/pages/index/index')
        } else {
          app.error(data.msg)
        }
      })
    },
    confirm(e) {
      this.inputParams.node = e.value[0].id
      this.inputParams.nodeText = e.value[0].title
      this.showPicker = false
    },
    gotoXY(url) {
      app.goto('/pages/index/webView?url=' + url)
    },
    forgetPassword() {
      var siteInfo = require('siteinfo.js')
      let url = siteInfo.jkdUrl + 'formPages/login/login'
      uni.$u.route('/pages/index/webView', {
        url,
        forget: true,
        title: '忘记密码'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 导入colorUI
@import '/static/css/colorui/main.css';
@import '/static/css/colorui/icon.css';
@import '/static/css/colorui/animation.css';
.register-page {
  width: 100%;
  position: absolute;

  /* 顶部背景图 start */
  .zzy-top-backgroup {
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;

    .backgroud-image {
      width: 100%;
    }
  }
  /* 顶部背景图 end */

  .blue-title {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 128rpx auto 86rpx;
    overflow: hidden;
  }

  .input-style {
    width: 100%;
    height: 80rpx;
    background: #f6f9fe;
    border-radius: 50rpx;
    margin-bottom: 35rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx 0;
  }
}
</style>
